<template>
  <PublicPage :showHead="false">
    <view class="shopDetails_box">
      <view
        :class="scrollTop <= 150?'':'opc0'"
        class="goBack_box"
        :style="'top:'+globalData.menuButtonObject.top+'px;'"
        @click.stop="goBackFn">
        <image v-if="routerlength <= 1" src="@/static/image/goHome_con.png" mode="widthFix" style="width:100%;height:100%;" />
        <image v-else src="@/static/image/goBack_con.png" mode="widthFix" style="width:100%;height:100%;" />
      </view>
      <scroll-view scroll-y style="height:100%;" @scroll="_scrollFn" @scrolltolower="scrolltolowerFn">
        <!-- 作者主页背景图 -->
        <view class="headBox">
          <image :src="otherUserInfo.backgroundUrl" style="width:100%;height:100%;" mode="aspectFill" />
          <view class="headGroupMsg">
            <view class="headGroupBox">
              <view class="u-flex" @click="goHomePage">
                <view class="headImgBox">
                  <image :src="otherUserInfo.communityLogo" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;" />
                </view>
                <view>
                  <view class="fz-18 fw5 ov1" style="max-width:300rpx;">{{otherUserInfo.communityName}}</view>
                  <view class="fz-12 u-p-t-8">成员 {{playvolumeFn(otherUserInfo.memberCount) || 0}} 跟团人次 {{playvolumeFn(otherUserInfo.followGroupCount) || 0}}</view>
                </view>
              </view>
              <!-- <view class="guanzhuBtn" @click="attention" v-if="otherUserInfo.isMyself===0&&otherUserInfo.followStatus === 0">
                +关注
              </view> -->
            </view>
          </view>
        </view>

        <!-- 吸顶盒子 -->
        <view class="headBoxFixed" :class="scrollTop <= 150?'':'opc1'">
          <view :style="'height:'+globalData.navTop+'px;'"></view>
          <view class="headGroupBox">
            <view class="navBack" @click="goBackFn"><image src="@/static/image/navBack_icon.png" style="width:100%;height:100%;border-radius: 50%;display: block;" /></view>
            <view class="headImgBox">
              <image :src="goods.communityLogo || otherUserInfo.communityLogo" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;" />
            </view>
            <view class="fz-16 fw5 ov1" style="max-width:250rpx;">{{goods.communityName || otherUserInfo.communityName}}</view>
            <view class="guanzhuBtn" @click="attention" v-if="otherUserInfo.isMyself===0&&otherUserInfo.followStatus === 0">+关注</view>
          </view>
        </view>
        <!-- 商品列表 -->
        <view class="u-p-t-24">
          <view
            v-for="(item, index) in goodsList"
            :key="index"
            class="u-p-24 goodsForBox"
            @click.stop="navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${item.shopWindowId}`})"
          >
            <view class="goodsImage">
              <image
                :src="item.image[0].url"
                mode="aspectFill"
                style="width: 100%; height: 100%"
              />
            </view>
            <view class="goodsMsg">
              <view class="ov2">{{ item.goodsName }}</view>
              <view class="justify-between u-p-t-8">
                <view class="fz-10 viceColor u-flex" style="flex:1;" v-if="!infoData.communityName">
                  <view style="width: 32rpx; height: 32rpx; margin-right: 6rpx;border-radius: 50%;overflow: hidden;flex-shrink:0;">
                    <image
                      :src="item.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                      mode="aspectFill"
                      style="width:100%;height:100%;"
                    />
                  </view>
                  <view class="communityName_box">{{ item.communityName }}</view>
                </view>
                <view class="fz-10 themeFontColor sold_box"
                  >已售{{ item.saleCount }}</view
                >
              </view>
              <view style="flex: 1"></view>
              <!-- 最大最小佣金相等 -->
              <view
                class="themeFontColor u-p-t-8 "
                v-if="item.mixCommission === item.maxCommission"><text class="fz-10 ">赚￥</text><text class="fw6">{{ item.mixCommission || item.maxCommission }}</text></view>
              <!-- 佣金区间 -->
              <view class="themeFontColor u-p-t-8" v-else
                ><text class="fz-10">赚￥</text><text class="fw6">{{ item.mixCommission }}~{{item.maxCommission}}</text></view>

              <view class="justify-between items-end fz-10 viceColor u-p-t-8">
                <!-- 最大最小售价相等 -->
                <view v-if="item.minSalePrice === item.maxSalePrice"
                  >售价￥{{ item.minSalePrice || item.maxSalePrice }}，佣金{{
                    item.commissionRatio
                  }}%</view
                >
                <!-- 售价区间 -->
                <view v-else
                  >售价￥{{ item.minSalePrice }}~{{ item.maxSalePrice }}，佣金{{
                    item.commissionRatio
                  }}%</view
                >
                <view v-if="item.isSelected==1">已添加小店</view>
                <view
                  v-else
                  class="addwindowBtn"
                  @click.stop="_addWindow(item, index)"
                  >+ 小店</view
                >
              </view>
            </view>
          </view>
          <div class="no_more" v-if="getParams.finish">没有更多了~</div>
        </view>
        <!-- 无数据-缺省頁 -->
        <DefaultPage
          tips="当前供货无可帮卖的商品，"
          tips2="去看看其他人吧"
          :custoBtn="true"
          type="2"
          :minusHeight="188"
          v-if="!goodsList.length && !getParams.loading"
        >
          <view class="u-flex">
            <button class="buttonStyleNone defaultBtn" open-type="share">
              邀请好友来供货
            </button>
          </view>
        </DefaultPage>
      </scroll-view>
    </view>
    <!-- 设置下级帮卖 -->
    <SetChild :show="childShow" :item="clickItem" :type="0" @success="_addSuccess" @close="childShow = false" />
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue"
import DefaultPage from "@/components/defaultPage/index.vue";
import User from '@/api/user.js'
import goods from "@/api/goods.js"
import SetChild from "../goods/setChild.vue"
import Util from "@/api/util.js"
export default {
  components: {
    PublicPage,
    SetChild,
    DefaultPage
  },
  data () {
    return {
      scrollTop: 0,
      routerlength: 1,
      routeData: {}, // 路由数据
      otherUserInfo:{}, // 作者用户信息
      getParams: {
        currentPage: 1,
        pageSize: 10,
        finish: false, // 是否还有更多
        loading: true
      },
      goodsList: [], // 商品列表
      childShow: false,
      clickItem: {},
      clickIndex: 0, // 点击的下标
    }
  },
  // 分享
  onShareAppMessage() {
    return {
      path: '/pages/index/index',
      title: "我想帮你卖货，快来发布商品设置佣金！供货分销轻松收单！",
      imageUrl: `https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/new_selectGoods_share.png?t=${Date.parse(new Date())}`,
    };
  },
  computed: {
    globalData() {
      return this.$store.state.globalData;
    },
    userInfo () {
      return this.$store.state.userInfo
    },
  },
  onLoad (r) {
    this.routeData = r
    // 禁用菜单的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
    this.routerlength = getCurrentPages().length
    this.getOthersInfoFn()
  },
  methods: {
    // 获取他人用户信息
    getOthersInfoFn () {
      User.getOthersInfo({accountId: this.routeData.accountId}).then(res => {
        this.otherUserInfo = res.data
        this._getGoodsSquare()
      })
    },
    // 获取列表
    async _getGoodsSquare() {
      this.getParams.loading = true
      if (this.otherUserInfo&&this.otherUserInfo.communityName) {
        this.getParams = {
          ...this.getParams,
          accountId: this.otherUserInfo.accountId
        }
      }
      const { data } = await goods.getGoodsSquare(this.getParams)
      if(data){
        data.records.forEach((v) => {
          v.image = JSON.parse(v.image);
          // this.$set(v, "isAdd", false); // 是否已添加橱窗
        });
        if (this.getParams.currentPage === 1) {
          this.goodsList = data.records;
        } else {
          this.goodsList.push(...data.records);
        }
        this.getParams.finish =
          this.getParams.currentPage * this.getParams.pageSize !==
          this.goodsList.length;
      } else {
        this.getParams.currentPage = 1
        this.goodsList = []
      }
      this.getParams.loading = false
    },
    // 滚动到底部加载
    scrolltolowerFn () {
      if (this.getParams.finish) return // 没有数据滚动不加载
      this.getParams.currentPage += 1
      this._getGoodsSquare()
    },
    //  添加橱窗
    _addWindow(item, index) {
      this.childShow = true;
      this.clickItem = JSON.parse(JSON.stringify(item));
      this.clickIndex = index;
    },
    // 添加成功
    _addSuccess(){
      this.goodsList[this.clickIndex].isSelected = 1; // 状态改为已添加橱窗
    },
    // 返回
    goBackFn () {
      if (this.routerlength <= 1) {
        this.switchTab({url: '/pages/index/index'})
        return
      }
      this.navigateBack()
    },
    // 跳转去作者主页
    goHomePage(){
      let routes = getCurrentPages()
      let pageUrlArr = ['pagesB/personalCenter/homePage']
      if (routes.length>=2&&pageUrlArr.includes(routes[routes.length-2].route)) {
        this.navigateBack({
          delta: 1
        })
        return
      }
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${this.routeData.accountId}`})
    },
    _scrollFn(e){
      this.scrollTop = e.detail.scrollTop
    },
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
  }
}
</script>
<style lang="scss" scoped>
.shopDetails_box {
  height: 100%;
  .goBack_box {
    position: fixed;
    z-index: 998;
    width: 60rpx;
    height: 60rpx;
    left: 32rpx;
    top: 48px;
    transition: opacity .5s;
  }
  .goBack_box.opc0{
    opacity: 0;
  }
  .headBox{
    width:100%;
    height:376rpx;
    border-radius: 0 0 32rpx 32rpx;
    overflow: hidden;
    position: relative;
    .headGroupMsg{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 288rpx;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
      .headGroupBox{
        position: absolute;
        bottom: 32rpx;
        left: 0;
        width: 100%;
        padding: 0 32rpx;
        color: #FFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .headImgBox{
          width: 128rpx;
          height: 128rpx;
          border-radius: 50%;
          border: 1px dashed #FFFFFF;
          background-color: #FFFFFF;
          margin-right: 24rpx;
        }
        .guanzhuBtn{
          background: #E44435;
          border-radius: 8rpx;
          width: 128rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          margin-left: 80rpx;
        }
      }
    }
  }

  .headBoxFixed{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFF;
    opacity: 0 ;
    transition: opacity .5s;
    .headGroupBox{
      display: flex;
      align-items: center;
      padding-top: 8rpx;
      padding-bottom: 16rpx;
      .navBack{
        width: 64rpx;
        height: 64rpx;
        padding: 12rpx;
        margin-left: 24rpx;
        margin-right: 16rpx;
      }
      .headImgBox{
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        background-color: #FFFFFF;
        margin-right: 6rpx;
      }
      .guanzhuBtn{
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 32rpx;
        padding: 0 16rpx;
        background-color: #E44435;
        color: #FFFFFF;
        margin-left: 6rpx;
        font-size: 24rpx;
      }
    }
  }
  .headBoxFixed.opc1{
    opacity: 1;
  }
  .goodsForBox {
    background-color: #fff;
    display: flex;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 4rpx 24rpx rgba(150, 151, 153, 0.16);
    border-radius: 16rpx;
    &:last-child {
      margin-bottom: 0rpx;
    }
    .goodsImage {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 24rpx;
    }
    .goodsMsg {
      flex: 1;
      display: flex;
      flex-direction: column;
      .ov2 {
        @include bov(2);
      }
      .addwindowBtn {
        color: #fff;
        padding: 8rpx 20rpx;
        border-radius: 30rpx;
        background-color: #e44435;
      }
      .communityName_box {
        width: 300rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
      }
      .sold_box {
        flex: 0 0 auto;
      }
    }
  }
  .defaultBtn {
    background: #e44435;
    padding: 0 30rpx;
    border-radius: 60rpx;
    color: #fff;
    line-height: 60rpx;
    margin: 0 auto;
    margin-top: 25rpx;
    font-size: 28rpx;
  }
}

</style>